<template>
	<div class="fensihuaxing">
		<div class="shipinbiaoxian">
			<div class="shouye_tou1">
				<span>近10个视频表现</span>
			</div>
			<div class="tufen">
				<div class="tufen1">
					<div id="c1"></div>
				</div>
				<div class="tufen2">
					<div id="c2"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { Chart, getEngine } from '@antv/g2';
	export default{
		name:"fensihuaxing",
		data(){
			return{
				tuZonggao:'',
				setData:[
					{ sex: '男', sold: 0.30 },
					{ sex: '女', sold: 0.70 },
				],
				zhuData:[
					{ year: '10-27', sales: 108 },
					{ year: '10-28', sales: 20 },
					{ year: '10-29', sales: 61 },
					{ year: '10-30', sales: 165 },
					{ year: '10-31', sales: 18 },
					{ year: '11-01', sales: 88 },
					{ year: '11-02', sales: 120 },
					{ year: '11-03', sales: 200 },
				]
			}
		},
		mounted(){
			this.tuZonggao=document.body.offsetWidth*0.3;
			console.log(this.tuZonggao)
			
			$(window).resize(()=>{
				this.tuZonggao=document.body.offsetWidth*0.2;
			})
			
			this.settu();
			this.settu1();
		},
		methods:{
			settu(){
				const G = getEngine('canvas');
				const chart = new Chart({
				  container: 'c1',
				  autoFit: true,
				  height: this.tuZonggao,
				  padding: [20, 30, 30, 20],
				});
				
				chart.coordinate('theta', {
				  radius: 0.8,
				});
				
				chart.legend({
					position:'left'
				});
				
				chart.data(this.setData);
				
				
				
				chart.tooltip({
				  showTitle: false,
				  showMarkers: false,
				});//展示 Tooltip中showCrosshairs 辅助线
				
				chart
				  .interval()
				  .adjust('stack')
				  .position('sold')
				  .color('sex', ['#1890ff', '#f04864'])
				  .label('sold', {
				    content: (obj) => {
				      const group = new G.Group({});
				      group.addShape({
				        type: 'image',
				        attrs: {
				          x: 0,
				          y: 0,
				          width: 40,
				          height: 50,
				          img: obj.sex === '男' ?
				            'https://gw.alipayobjects.com/zos/rmsportal/oeCxrAewtedMBYOETCln.png' :
				            'https://gw.alipayobjects.com/zos/rmsportal/mweUsJpBWucJRixSfWVP.png',
				        },
				      });
				
				      group.addShape({
				        type: 'text',
				        attrs: {
				          x: 20,
				          y: 64,
				          text: obj.sold*100+'%',
						  fontSize:12,
				          textAlign: 'center',
				          textBaseline: 'top',
				          fill: obj.sex === '男' ? '#1890ff' : '#f04864',
				        },
				      });
				      return group;
				    }
				  });
				
				chart.interaction('element-active');
				chart.interaction('element-single-selected');
				
				chart.render();
			},
			settu1(){
				const chart = new Chart({
				  container: 'c2',
				  autoFit: true,
				  height: this.tuZonggao,
				});
				
				chart.data(this.zhuData);
				chart.scale('sales', {
				  nice: true,
				  ticks:[0,50,100,150,200]
				});
				
				chart.tooltip({
				  showMarkers: false
				});
				chart.interaction('active-region');
				
				chart.interval().position('year*sales');
				
				chart.render();
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.fensihuaxing{
		.shipinbiaoxian{
			background-color: #fff;
			padding: 0.6rem 1.5rem;
			border-radius:0.1rem ;
			
			.shouye_tou1{
				height: 100%;
				box-sizing: border-box;
				position: relative;
				margin-bottom:0.8rem ;
				
				span{
					font-weight: 600;
					font-size: 0.5rem;
					display: inline-block;
					margin-left:0.8rem ;
					margin-top:0.8rem ;
				}
				
				span::before{
					content: "";
					display: block;
					position: absolute;
					top: 0.6rem;
					left: 0;
					width: 0.3rem;
					height: 1rem;
					background-color: #1890FF;
				}
			}
			
			.tufen{
				display: flex;
				
				.tufen1{
					flex: 1;
				}
				.tufen2{
					flex: 1;
				}
			}
		}
	}
</style>
